<template>
  <div>
    <div v-on:click="displayTimeSeries" ref="timedisplay" class="clickable fg-yellow noselect zoom-ctrl time-series-display"
         title="Display">
      <svg v-if="!isDisplaying" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
           width="16" height="16">
        <path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5zM6 4.5l6 3.5-6 3.5z"
              fill="#ffffff"></path>
      </svg>
      <svg v-if="isDisplaying" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
           width="16" height="16">
        <path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5zM5 5h2v6h-2zM9 5h2v6h-2z"
              fill="#ffffff"></path>
      </svg>
    </div>
    <div class="time-bar">
      <div class="progress time-bar-progress" >
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
             aria-valuemax="100"></div>
      </div>
      <div id="calendar">
        <div data-do="1588651200000" class="uiyellow clickable" style="width: 10%;">2020-01-01</div><div data-do="1588737600000" class="uiyellow clickable" style="width: 10%;">2020-01-02</div><div data-do="1588824000000" class="uiyellow clickable" style="width: 10%;">2020-01-03</div><div data-do="1588910400000" class="uiyellow clickable" style="width: 10%;">2020-01-04</div><div data-do="1588996800000" class="uiyellow clickable" style="width: 10%;">2020-01-05</div><div data-do="1589083200000" class="uiyellow clickable" style="width: 10%;">2020-01-06</div><div data-do="1589169600000" class="uiyellow clickable" style="width: 10%;">2020-01-07</div><div data-do="1589256000000" class="uiyellow clickable" style="width: 10%;">2020-01-08</div><div data-do="1589342400000" class="uiyellow clickable" style="width: 10%;">2020-01-09</div><div data-do="1589428800000" class="uiyellow clickable" style="width: 10%;">2020-01-10</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TimeseriesControl',
  data () {
    return {
      isDisplaying: false
    }
  },
  methods: {
    displayTimeSeries () {
      var displayTitle = this.$refs.timedisplay.title

      if (displayTitle === 'Display') {
        this.$refs.timedisplay.title = 'Pause'
        this.isDisplaying = true
      } else {
        this.$refs.timedisplay.title = 'Display'
        this.isDisplaying = false
      }
    }
  }
}
</script>

<style scoped>
  .time-bar{
    position:absolute;
    left: 35px
  }

  .time-bar-progress{
    width: 800px;
    height: 5px
  }
  .time-series-display{
    position:absolute;
    width: 25px;
    height: 25px;
  }
  .uiyellow {
    text-shadow: 0 0 4px black;
    color: #fff3e1;
  }

  .clickable {
    cursor: pointer;
  }

  .fg-yellow {
    color: #fff3e1;
  }

  .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .zoom-ctrl {
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background-color: rgba(68, 65, 65, 0.84);
    margin-bottom: 4px;
    text-align: center;
    align-self: flex-end;
    pointer-events: auto;
    font-size: 19px;
  }

  .zoom-ctrl:hover {
    background-color: rgba(203, 199, 98, 0.6);
  }

  .progress {
    display: -ms-flexbox;
    display: flex;
    /*height: 1rem;*/
    overflow: hidden;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
  }

  .progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width 0.6s ease;
  }

  #calendar {
    position: absolute;
    left: 0px;
    right: 0;
    top: 5px;
    white-space: nowrap;
  }
  #calendar div {
    display: inline-block;
    box-sizing: border-box;
    text-align: left;
    padding: 6px 0 0 8px;
    font-size: 12px;
    line-height: 1;
    height: 26px;
    white-space: nowrap;
    overflow: hidden;
  }
</style>
